import { useContext, useMemo } from 'react';
import { useDragLayer } from 'react-dnd';
import { useLocale } from '../utils/hooks';
import { RuleTreePropsContext } from './RuleTreeContext';

export default function CustomDragLayer() {
  const { localeMap } = useLocale();
  const { uid, dragLayerRender } = useContext(RuleTreePropsContext);

  const { isDragging, clientOffset, item } = useDragLayer((monitor) => {
    return {
      isDragging: monitor.isDragging(),
      item: monitor.getItem() || {},
      clientOffset: monitor.getClientOffset(),
    };
  });

  const defaultDoms = useMemo(() => (
    <span
      style={{
        backgroundColor: '#00000055',
        borderRadius: 4,
        padding: '0 4px',
        color: '#fff',
      }}
    >
      {localeMap.dragToHighlightArea}
    </span>
  ), [localeMap]);

  if (!isDragging || !clientOffset || item?.dragUid !== uid) {
    return null;
  }

  return (
    <div
      style={{
        position: 'fixed',
        left: clientOffset.x,
        top: clientOffset.y,
        pointerEvents: 'none',
      }}
    >
      {dragLayerRender ? dragLayerRender(defaultDoms) : defaultDoms}
    </div>
  );
}